<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>视频教程</title>
    <link rel="shortcut icon" th:href="@{/favicon.ico}"/>
    <link rel="stylesheet" th:href="@{/static/bootstrap/css/bootstrap.min.css}">
    <script th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
    <link rel="stylesheet" th:href="@{/static/css/style3.css}">
</head>
<body>
<div th:replace="header::header1"></div>
<div class="col-md-7 col-md-offset-2 main">
<!--    <div class="text-right ">-->
<!--        <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>-->
<!--        <a th:href="@{getAllNews}">点此返回主页</a>-->
<!--    </div><div class="text-right ">-->
<!--    <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>-->
<!--    <a th:href="@{getAllNews}">点此返回主页</a>-->
<!--</div>-->
    <div class="container-fluid">
        <ul class="nav navbar-nav">
            <li><a href="getVideoListOfLike">猜你喜欢</a> </li>
           <li><a href="getVideoListByUser">最新视频</a> </li>
           <li><a  href="getVideoListByHeat" class="text-info">最热视频</a></li>
            <li><a  href="getVideoListBySystem" class="text-info">系统推送</a></li>
            <li><a  href="getVideoListRecord" class="text-info">浏览记录</a></li>
        </ul>
        <ul class="navbar-collapse">
            <li >
                <div class="form-group">

                        <select class="form-control" id="select_id" name="type" onchange="selectOnchang(this)">
                            <option selected="selected">请下拉选择类型</option>
                            <option  th:each="type:${types}"  data-value="1" th:data-value="${type.id}" th:text="${type.typeName}"></option>

                        </select>
                </div>
            </li>

        </ul>
    </div>
    <form class="navbar-form navbar-right"  method="get" role="search" th:action="@{getVideoByName}">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入视频名关键字" name="title">
        </div>
        <button type="submit" class="btn navbar-btn">搜索</button>
    </form>

    <table class="table table-hover">
        <thead>
        <tr>
<!--            <th>#</th>-->
            <th>视频名</th>
            <th>视频作者</th>
            <th>上传时间</th>
            <th>播放量</th>
            <th>下载量</th>
            <th>评论量</th>
<!--            <th>播放</th>-->
<!--            <th>下载</th>-->
        </tr>
        </thead>
        <tbody th:if="${pageInfo != null}">
        <!--        <c:if test="${!empty videoList}">-->
        <!--            <c:forEach var="video" items="${videoList.list}">  ${session.user}!=null ? ${session.user.username}-->
        <tr th:each="video:${pageInfo.list}" >
<!--            <td th:text="${video.id}"></td>-->
            <td ><a th:text="${video.title}"  th:href="@{'videoPlayById?id='+${video.id }}"></a></td>
            <td th:if="${session.user.getUsername().equals(video.author)}" th:text="${video.author}"> </td>
            <td th:if="!${session.user.getUsername().equals(video.author)}"> <a th:text="${video.author}" th:href="'chat?toUser='+${video.author}"></a> </td>
            <td th:text="${video.uploadTime}"></td>
            <td th:text="${video.vv}"></td>
            <td th:text="${video.download}"></td>
            <td th:text="${video.tc}"></td>
<!--                        <td><button><a  th:href="@{'videoPlayById?id='+${video.id }}">播放</a></button></td>-->
<!--            <td>-->
<!--                <button><a th:onclick="|bofang(${video.id})|" href="javascript:;">播放</a></button>-->
<!--            </td>-->
<!--            <td>-->
<!--                <button><a th:href="@{'downloadVideoById?id='+${video.id}}">下载</a></button>-->
<!--            </td>-->
        </tr>
        <!--            </c:forEach>-->
        <!--        </c:if>-->
        </tbody>
    </table>
    <!-- 分页信息 -->
    <div class="col-md-6">
        当前<span class="label label-default" th:text="${pageInfo.pageNum }"></span>页
        |总<span class="label label-default" th:text="${pageInfo.pages }"></span>页
        |有<span class="label label-default" th:text="${pageInfo.total }"></span>个视频.
    </div>
    <div class="col-md-6">
        <span th:text="${msg}"></span>
    </div>
    <div class="col-md-3">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li><a th:if="${type == 0}" th:href="@{'getVideoByName?title='+${title}}">首页</a></li>
                <li><a th:if="${type == 1}" th:href="@{'getVideoListByUser'}">首页</a></li>
                <li><a th:if="${type == 2}" th:href="@{'getVideoListByHeat'}">首页</a></li>
                <li><a th:if="${type == 3}" th:href="@{'getVideoListBySystem'}">首页</a></li>
                <li><a th:if="${type == 4}" th:href="@{'getVideoListByOnly?videoId='+${videoId}}">首页</a></li>
                <li><a th:if="${type == 5}" th:href="@{'getVideoListByAuthor'}">首页</a></li>
                <!--  getVideoByName              <c:if test="${videoList.hasPreviousPage}">-->
                <li th:if="${pageInfo.hasPreviousPage}">
                    <a th:if="${type == 0}" th:href="@{'getVideoByName?title='+${title}+'&pageNum='+${pageInfo.pageNum-1}}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                    <a th:if="${type == 1}" th:href="@{'getVideoListByUser?pageNum='+${pageInfo.pageNum-1}}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                    <a th:if="${type == 2}" th:href="@{'getVideoListByHeat?pageNum='+${pageInfo.pageNum-1}}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                    <a th:if="${type == 3}" th:href="@{'getVideoListBySystem?pageNum='+${pageInfo.pageNum-1}}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                    <a th:if="${type == 4}" th:href="@{'getVideoListByOnly?videoId='+${videoId}+'&pageNum='+${pageInfo.pageNum-1}}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                    <a th:if="${type == 5}" th:href="@{'getVideoListByAuthor?pageNum='+${pageInfo.pageNum-1}}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>

                <li th:if="${pageInfo.hasNextPage}">
                    <a th:if="${type == 0}" th:href="@{'getVideoByName?title='+${title}+'&pageNum='+${pageInfo.pageNum+1}}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                    <a th:if="${type == 1}" th:href="@{'getVideoListByUser?pageNum='+${pageInfo.pageNum+1}}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                    <a th:if="${type == 2}" th:href="@{'getVideoListByHeat?pageNum='+${pageInfo.pageNum+1}}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                    <a th:if="${type == 3}" th:href="@{'getVideoListBySystem?pageNum='+${pageInfo.pageNum+1}}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                    <a th:if="${type == 4}" th:href="@{'getVideoListByOnly?videoId='+${videoId}+'&pageNum='+${pageInfo.pageNum+1}}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                    <a th:if="${type == 5}" th:href="@{'getVideoListByAuthor?pageNum='+${pageInfo.pageNum+1}}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <!--                </c:if>-->
                <li><a th:if="${type == 0}" th:href="@{'getVideoByName?title='+${title}+'&pageNum='+${pageInfo.pages}}">末页</a></li>
                <li><a th:if="${type == 1}" th:href="@{'getVideoListByUser?pageNum='+${pageInfo.pages }}">末页</a></li>
                <li><a th:if="${type == 2}" th:href="@{'getVideoListByHeat?pageNum='+${pageInfo.pages }}">末页</a></li>
                <li><a th:if="${type == 3}" th:href="@{'getVideoListBySystem?pageNum='+${pageInfo.pages }}">末页</a></li>
                <li><a th:if="${type == 4}" th:href="@{'getVideoListByOnly?videoId='+${videoId}+'&pageNum='+${pageInfo.pages}}">末页</a></li>
                <li><a th:if="${type == 5}" th:href="@{'getVideoListByAuthor?pageNum='+${pageInfo.pages }}">末页</a></li>
            </ul>
        </nav>
    </div>
</div>
<div th:replace="footer::footer1"></div>
</body>
<script type="text/javascript">

        function selectOnchang(obj){
            var value = obj.options[obj.selectedIndex].value;
            axios.get('/getVideoListByType?value=' + value).then(response => {
                location.href ='/getVideoListByType?value=' + value;
            })


        }


</script>
<script src="../../static/js/axios.js"></script>
</html>
